"use client"

import * as React from "react"

import { useMediaQuery } from "@/utils/use-media-query"
// 1. 创建上下文（仅存必要状态）
const MyTabsContext = React.createContext<{
  isDesktop: boolean
  setOpen: (open: boolean) => void
}>({ isDesktop: false, setOpen: () => {} })

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTrigger,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTrigger,
  DrawerTitle,
  DrawerFooter,
} from "@/components/ui/drawer"
import { ReactNode, useContext } from "react"
import Icon from "@/components/common/icon"
import { X } from "lucide-react"
import classNames from "classnames"


interface MyModalFooterProps {
  children: ReactNode
}
export const MyModalFooter = ({children}: MyModalFooterProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <DialogFooter>{children}</DialogFooter>
  }
  return <DrawerFooter>{children}</DrawerFooter>
}

interface MyModalTriggerProps {
  children: ReactNode
  asChild?: boolean
}
export const MyModalTrigger = ({children, asChild = true}: MyModalTriggerProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <DialogTrigger asChild={asChild}>{children}</DialogTrigger>
  }
  return <DrawerTrigger asChild={asChild}>{children}</DrawerTrigger>
}

interface MyModalHeaderProps {
  children: ReactNode
}
export const MyModalHeader = ({children}: MyModalHeaderProps)=>{
  const { isDesktop, setOpen } = useContext(MyTabsContext)
  if(isDesktop){
    return <DialogHeader className="relative h3">
      <DialogTitle className="text-center">
        {children}
      </DialogTitle>
      <button className="absolute top-1/2 transform -translate-y-1/2 right-0" onClick={()=>{
        setOpen(false)
      }}>
        <Icon icon={X} />
      </button>
    </DialogHeader>
  }
  return <DrawerHeader className="relative h3">
    <DrawerTitle className="text-center">
      {children}
    </DrawerTitle>
    <button className="absolute top-1/2 transform -translate-y-1/2 right-0" onClick={()=>{
      setOpen(false)
    }}>
      <Icon className="absolute top-1/2 transform -translate-y-1/2 right-0" icon={X} />
    </button>
  </DrawerHeader>
}

interface MyModalContentProps {
  children: ReactNode
  className?: string
}
export const MyModalContent = ({children, className}: MyModalContentProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <DialogContent className={className} showCloseButton={false}>
      {children}
    </DialogContent>
  }
  return <DrawerContent className={classNames("w-content", className)}>{children}</DrawerContent>
}


interface Props {
  children: ReactNode
  name?: string
}
export function MyModal({children, name = '7477'}: Props) {
  const [open, setOpen] = React.useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  if (isDesktop) {
    return (
      <MyTabsContext.Provider value={{ isDesktop, setOpen }}>
        <Dialog open={open} onOpenChange={setOpen}>{children}</Dialog>
      </MyTabsContext.Provider>
    )
  }

  return (
    <MyTabsContext.Provider value={{ isDesktop, setOpen }}>
      <Drawer open={open} onOpenChange={setOpen}>
        {children}
      </Drawer>
    </MyTabsContext.Provider>
  )
}

{/* <MyModal>
  <MyModalTrigger>
    <Button>filter</Button>
  </MyModalTrigger>
  <MyModalContent>
    <MyModalHeader>
      Filter
    </MyModalHeader>
    66666
    <MyModalFooter>
      <Button>确定</Button>
    </MyModalFooter>
  </MyModalContent>
</MyModal> */}